<template>
    <div class="condition-search">
        <Input v-model="userInput"
               icon="ios-search"
               :placeholder="inputPlaceholder"
               :style="styleObject"
               @on-click="iconClick"
               @on-enter="enterSearch"
               @on-change="changeAction"
        ></Input>
        <Icon type="ios-close-empty" class="clear_icon" @on-clcik="clearContent" v-if="isShowClearIcon"></Icon>
    </div>
</template>

<script>

    export default {
        props: {
            // placeholder 提示信息
            conditionTips: {
                type: String,
                default: "请输入..."
            },
            styleObject:{
                type: Object,
                default: function () {
                    return {
                        width: "200px"
                    }
                }
            },
        },
        mounted: function () {
            this.inputPlaceholder = this.conditionTips;
        },
        data () {
            return {
                // 用户输入的值
                userInput:"",
                inputPlaceholder:"请输入...",
            }
        },
        watch:{
            conditionTips: function (newValue, oldValue){
                this.inputPlaceholder = newValue;
            }
        },
        methods: {
            // 数据变化触发的事件
            changeAction: function () {
                this.$emit('input', this.userInput.trim());
            },
            // 点击enter触发的事件
            enterSearch: function () {
                this.$emit('input', this.userInput.trim());
                this.$emit("enter-search",this.userInput.trim());
            },
//            点击icon触发的事件
            iconClick: function () {
                this.$emit('input', this.userInput.trim());
                this.$emit("enter-search",this.userInput.trim());
            },
            // 点击icon触发的事件
            clearContent: function () {
                this.userInput = "";
            },
        },
        computed: {
            // 是否显示清除图标
            isShowClearIcon: function (){
                if(this.userInput.trim().length > 0){
                    return true;
                }else{
                    return false;
                }
            },
        },
    }
</script>

<style scoped lang="scss">
    .condition-search {
        display: inline-block;
        .clear_icon{
            font-size: 22px;
            position: relative;
            left: -45px;
            top: 5px;
        }
    }
</style>
